<template>
    <div class="ceshi">
        <el-drawer :close-on-click-modal="false" class="hm-drawer" size="70%" direction="rtl" v-model="show"
            :before-close="handleClose">
            <template #header>
                <div class="hm-box-title">商品详情</div>
            </template>

            <div class="hm-form-item-box1">
                <div class="hm-form-title" style=" position: relative; ">基本信息</div>

                <el-row class="hm-row3 mb96" :gutter="60">
                    <div style="margin-left: 30px">
                        <image-preview :src="commoditydetailsData.productImage" :width="380" :height="260" />
                    </div>
                    <el-col :span="13">
                        <div class="div_flex">
                            <div class="div_flex_items">
                                <div class="label">商品名称：</div>
                                <div class="value">{{ commoditydetailsData.styleName }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">商品类目：</div>
                                <div class="value">{{ commoditydetailsData.productCategoryName }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">商品编码：</div>
                                <div class="value">{{ commoditydetailsData.productsId }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">库存编码：</div>
                                <div class="value">{{ commoditydetailsData.stockCode }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">品牌：</div>
                                <div class="value">{{ commoditydetailsData.brandName }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">贸易方式：</div>
                                <div class="value">{{ commoditydetailsData.tradeMode }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">原货架类型：</div>
                                <div class="value">{{ commoditydetailsData.dictLabel }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">原货架号：</div>
                                <div class="value">{{ commoditydetailsData.locationName }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">出库次数：</div>
                                <div class="value">{{ commoditydetailsData.outNum }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">对接群名：</div>
                                <div class="value">{{ commoditydetailsData.groupName || '-' }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">招商员：</div>
                                <div class="value">{{ commoditydetailsData.recruiterName }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">供应商：</div>
                                <div class="value">{{ commoditydetailsData.supplierName }}</div>
                            </div>
                            <div class="div_flex_items">
                                <div class="label">库存数量：</div>
                                <div class="value">{{ commoditydetailsData.stockTotal }}</div>
                            </div>
                            <div class="div_flex_item">
                                <div class="label">卖点：</div>
                                <div class="value">{{ commoditydetailsData.sellingPoints }}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <div class="hm-form-title">直播补充信息</div>
                <div class="hm-form-mechanism">
                    <div class="mechanism_flex">
                        <div class="mechanism_div">
                            <div class="title">发货时间：</div>{{
                                commoditydetailsData.deliveryTime
                            }}
                        </div>
                        <div class="mechanism_div">
                            <div class="title">发货地：</div>{{
                                commoditydetailsData.placeDelivery
                            }}
                        </div>
                        <div class="mechanism_div">
                            <div class="title">物流/快递：</div>{{
                                commoditydetailsData.logistics
                            }}
                        </div>
                        <div class="mechanism_div">
                            <div class="title">适用人群：</div>{{
                                commoditydetailsData.eligibility
                            }}
                        </div>
                        <div class="mechanism_div">
                            <div class="title">厂家可用库存：</div>{{
                                commoditydetailsData.factoryStockNum
                            }}
                        </div>
                        <div class="mechanism_div">
                            <div class="title">不发货地区：</div>
                            <div class="value">{{
                                commoditydetailsData.noSendArea
                            }}</div>
                        </div>
                    </div>
                </div>

                <div class="hm-form-title">本次合作信息</div>
                <div class="hm-form-mechanism" v-for="(item, index) in commoditydetailsData.hmMechanismsList"
                    :key="index">
                    <div class="mechanism_title" v-if="item.cooperationMode">{{ '机制' + (index + 1) }}：</div>
                    <div class="mechanism_flex" v-if="item.cooperationMode">
                        <div class="mechanism_div">
                            <div class="title">合作方式：</div>{{ item.cooperationMode }}
                        </div>
                        <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                            <div class="title">售价：</div>{{ item.price }}
                        </div>
                        <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                            <div class="title">佣金：</div>{{ item.commission ? item.commission + '%' : '-' }}
                        </div>
                        <div class="mechanism_div">
                            <div class="title">直播机制：</div>{{ item.liveStreamingMechanism || '-' }}
                        </div>
                        <div class="mechanism_div">
                            <div class="title">成本价：</div>{{ item.costPrice || '-' }}
                        </div>
                        <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                            <div class="title">补充佣金：</div>{{ item.brokerage ? item.brokerage + '%' : '-' }}
                        </div>
                    </div>
                </div>
                <div class="hm-form-mechanism">
                    <div class="mechanism_title">商家信息</div>
                    <div class="mechanism_flex">
                        <div class="mechanism_div">
                            <div class="title">供应商名：</div>
                            <div>{{ commoditydetailsData.supplierName }}</div>
                        </div>
                        <div class="mechanism_div">
                            <div class="title">联系人：</div>
                            <div>{{ commoditydetailsData.contactName }}</div>
                        </div>
                        <div class="mechanism_div">
                            <div class="title">联系方式：</div>
                            <div>{{ commoditydetailsData.phone }}</div>
                        </div>
                        <div class="mechanism_div">
                            <div class="title">售卖合同：</div>
                            <div style="color: #0094FF;cursor: pointer;"
                                @click="dowload(commoditydetailsData.contractSellOssId)">{{
                                    commoditydetailsData.contractSellName }}</div>
                        </div>
                        <div class="mechanism_div">
                            <div class="title">破价合同：</div>
                            <div style="color: #0094FF;cursor: pointer;"
                                @click="dowload(commoditydetailsData.contractDiscountOssId)">{{
                                    commoditydetailsData.contractDiscountName }}</div>
                        </div>
                        <div class="mechanism_div">
                            <div class="title">保证金协议：</div>
                            <div style="color: #0094FF;cursor: pointer;"
                                @click="dowload(commoditydetailsData.marginNameUrlssId)">{{
                                    commoditydetailsData.marginName }}</div>
                        </div>
                        <div class="mechanism_div">
                            <div class="title">备注：</div>
                            <div class="value">{{ commoditydetailsData.offShelfRemark }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script setup name="removalRecordDetailes" lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;


const props = defineProps({
    commoditydetailsData: {
        type: Object,
        default: ''
    },
    dialogInfoVisible: {
        type: Boolean,
        default: false
    }
});
const show = computed(() => props.dialogInfoVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}
/** 下载 */
const dowload = (ossId: string) => {
    if (ossId) {
        window.open(ossId, '_blank');
    }
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.hm-form-title {
    font-size: 16px;
    font-weight: bold;
    color: #1a1b1c;
    margin-bottom: 10px;
}

.div_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    color: #606266;
    min-height: 100%;

    .div_flex_items {
        width: 50%;
        display: flex;
        align-items: flex-start;
        min-height: 13%;
    }

    .div_flex_item {
        width: 100%;
        display: flex;
        align-items: flex-start;
    }

    .label {
        width: 100px;
    }

    .value {
        width: calc(100% - 100px);
    }
}

.hm-box-title {
    font-weight: 600;
    font-size: 21px;
    color: #1A1B1C;
    padding-bottom: 24px;
    border-bottom: 1px solid #f3f3f7;
}

:deep(.el-drawer__header) {
    margin-bottom: 0px !important;
}

.mb96 {
    margin-bottom: 20px;
}

:deep(.el-descriptions) {
    height: 100%;
}

:deep(.el-descriptions__body) {
    height: 100%;
}

:deep(.el-descriptions__table) {
    height: 100%;
}

.hm-form-mechanism {
    .mechanism_title {
        font-weight: 500;
        font-size: 14px;
        color: #1A1B1C;
        margin-bottom: 15px;
    }
}

.mechanism_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;

    .mechanism_div {
        margin-bottom: 15px;
        width: calc(100% / 3);
        display: flex;
        align-items: center;
        color: #606266;
        font-size: 14px;

        .title {
            font-size: 14px;
            color: #303133;
            width: 100px;
        }

        .value {
            width: calc(100% - 100px);
            word-break: break-all;
        }
    }
}
</style>